<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="/assets/css/atom-one-light.css">
    
        <title>bioView - 一个生信常用文件格式的可读性增强工具</title>
		<link rel="stylesheet" type="text/css" href="/assets/css/002.css">
    
	<link rel="stylesheet" href="/assets/css/font-awesome.min.css">
	<link rel="shortcut icon" href="/assets/img/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
	<script src="/assets/js/highlight.pack.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>

	

	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-140127665-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-140127665-1');
</script>


</head>
<body>
	<div class="wrapper">
		<div class="default_title">
			<img src="/assets/img/mycomputer.png" />
			
				<h1>NaNg's blog</h1>
			
		</div>
		<ul class="topbar">
	<a href="/pages/me.html"><li><u>A</u>bout</li></a>
	<a href="/pages/links.html"><li><u>L</u>inks</li></a>
	<a href="https://www.dropbox.com/sh/nhy3m3cvojizkk5/AABH8mt5gh3PiBrtWnCxE87ma?dl=0"><li><u>D</u>ropbox</li></a>
</ul>
		<div class="tag_list">
			<ul id="tag-list">
				<li><a href="/" ><img src="/assets/img/disk.png" />(C:)</a>
			<ul>
				
				
				<li><a href="/tag/3d/" title="3d"><img src="/assets/img/folder.ico" />3d</a></li>
				
				<li><a href="/tag/bioinformatics/" title="bioinformatics"><img src="/assets/img/folder.ico" />bioinformatics</a></li>
				
				<li><a href="/tag/notes/" title="notes"><img src="/assets/img/folder.ico" />notes</a></li>
				
				<li><a href="/tag/others/" title="others"><img src="/assets/img/folder.ico" />others</a></li>
				
				<li><a href="/tag/sci-fiction/" title="sci fiction"><img src="/assets/img/folder.ico" />sci fiction</a></li>
				
			</ul>
				</li>
			</ul>
		</div>
		<div class="post_list">
			
				<ul>
					
					<li>
						<a href="https://ani-net-project.gitee.io/index.html" title="AniNet">
								<img class="small-icon" src="/assets/img/aninet.png" title="AniNet" />AniNet
						</a>
					</li>
					
					<li>
						<a href="/examples/boids/index.html" title="Boids">
								<img class="small-icon" src="/assets/img/bird.png" title="Boids" />Boids
						</a>
					</li>
					
					<li>
						<a href="/examples/EM-alg/1_how_it_works.html" title="EM 算法 1. how it works">
								<img class="small-icon" src="/assets/img/notebook.ico" title="EM 算法 1. how it works" />EM 算法 1. how it works
						</a>
					</li>
					
					<li>
						<a href="/examples/pyvm/pyvm_ch0-3_cn.html" title="翻译：Inside Python Virtual Machine（前三章）">
								<img class="small-icon" src="/assets/img/html_ie.ico" title="翻译：Inside Python Virtual Machine（前三章）" />翻译：Inside Python Virtual Machine（前三章）
						</a>
					</li>
					
					<li>
						<a href="/20190624/cLife.html" title="器官工业幻想">
								<img class="small-icon" src="/assets/img/file.ico" title="器官工业幻想" />器官工业幻想
						</a>
					</li>
					
					<li>
						<a href="/examples/pubnet/Network_statistic.html" title="PubNet network statistic">
								<img class="small-icon" src="/assets/img/notebook.ico" title="PubNet network statistic" />PubNet network statistic
						</a>
					</li>
					
					<li>
						<a href="/examples/pubnet/sample.html" title="PubMed bio-conception network example">
								<img class="small-icon" src="/assets/img/net.png" title="PubMed bio-conception network example" />PubMed bio-conception network example
						</a>
					</li>
					
					<li>
						<a href="/examples/hpo_enrich/example_sagd_00055.html" title="HPO enrichment example">
								<img class="small-icon" src="/assets/img/notebook.ico" title="HPO enrichment example" />HPO enrichment example
						</a>
					</li>
					
					<li>
						<a href="/20190222/KS-Test.html" title="Two sample Kolmogorov-Smirnov test">
								<img class="small-icon" src="/assets/img/file.ico" title="Two sample Kolmogorov-Smirnov test" />Two sample Kolmogorov-Smirnov test
						</a>
					</li>
					
					<li>
						<a href="/20190220/threejs-test-page.html" title="three.js test page">
								<img class="small-icon" src="/assets/img/tree.png" title="three.js test page" />three.js test page
						</a>
					</li>
					
					<li>
						<a href="/20181111/hic_data_format.html" title="Hi-C 数据分析结果应该怎么存？">
								<img class="small-icon" src="/assets/img/file.ico" title="Hi-C 数据分析结果应该怎么存？" />Hi-C 数据分析结果应该怎么存？
						</a>
					</li>
					
					<li>
						<a href="/20181010/d3_bubble_chart.html" title="用 D3.js 画一个 bubble chart">
								<img class="small-icon" src="/assets/img/file.ico" title="用 D3.js 画一个 bubble chart" />用 D3.js 画一个 bubble chart
						</a>
					</li>
					
					<li>
						<a href="/20180724/new_kind_slides.html" title="论制作 Slides 的几种姿势">
								<img class="small-icon" src="/assets/img/file.ico" title="论制作 Slides 的几种姿势" />论制作 Slides 的几种姿势
						</a>
					</li>
					
					<li>
						<a href="/slides/test/slideshow.html" title="Markdown Slides Test">
								<img class="small-icon" src="/assets/img/slides.png" title="Markdown Slides Test" />Markdown Slides Test
						</a>
					</li>
					
					<li>
						<a href="/20180221/bioview.html" title="bioView - 一个生信常用文件格式的可读性增强工具">
								<img class="small-icon" src="/assets/img/file.ico" title="bioView - 一个生信常用文件格式的可读性增强工具" />bioView - 一个生信常用文件格式的可读性增强工具
						</a>
					</li>
					
					<li>
						<a href="/20170916/markdown-test-page.html" title="Markdown Test Page">
								<img class="small-icon" src="/assets/img/file.ico" title="Markdown Test Page" />Markdown Test Page
						</a>
					</li>
					
					<li>
						<a href="/20170831/gol-js.html" title="一个JS实现的生命游戏">
								<img class="small-icon" src="/assets/img/file.ico" title="一个JS实现的生命游戏" />一个JS实现的生命游戏
						</a>
					</li>
					
					<li>
						<a href="/20170831/parallel.html" title="这大概是程序串行改并行最简单粗暴的方法">
								<img class="small-icon" src="/assets/img/file.ico" title="这大概是程序串行改并行最简单粗暴的方法" />这大概是程序串行改并行最简单粗暴的方法
						</a>
					</li>
					
					<li>
						<a href="/20170730/learn-docker.html" title="学习Docker">
								<img class="small-icon" src="/assets/img/file.ico" title="学习Docker" />学习Docker
						</a>
					</li>
					
					<li>
						<a href="/20170530/learn-assemble.html" title="学习汇编语言">
								<img class="small-icon" src="/assets/img/file.ico" title="学习汇编语言" />学习汇编语言
						</a>
					</li>
					
					<li>
						<a href="/20170505/schoolnet.html" title="如何在非校园网环境下使用学校文献数据库">
								<img class="small-icon" src="/assets/img/file.ico" title="如何在非校园网环境下使用学校文献数据库" />如何在非校园网环境下使用学校文献数据库
						</a>
					</li>
					
					<li>
						<a href="/20170308/zerotier.html" title="使用ZeroTier搭建虚拟局域网">
								<img class="small-icon" src="/assets/img/file.ico" title="使用ZeroTier搭建虚拟局域网" />使用ZeroTier搭建虚拟局域网
						</a>
					</li>
					
					<li>
						<a href="/20161224/hy-in-brief.html" title="Python生态下的Lisp方言">
								<img class="small-icon" src="/assets/img/file.ico" title="Python生态下的Lisp方言" />Python生态下的Lisp方言
						</a>
					</li>
					
					<li>
						<a href="/20161210/scrapy_douban.html" title="使用Scrapy爬取豆瓣相册">
								<img class="small-icon" src="/assets/img/file.ico" title="使用Scrapy爬取豆瓣相册" />使用Scrapy爬取豆瓣相册
						</a>
					</li>
					
					<li>
						<a href="/20161115/speed_up_python.html" title="加速Python">
								<img class="small-icon" src="/assets/img/file.ico" title="加速Python" />加速Python
						</a>
					</li>
					
				</ul>
			
		</div>
		<div class="post_total">
			
				<div class="left">25 object(s)</div>
			
			<div class="right">&nbsp;</div>
		</div>
	</div>
	
        <div class="content">
			<div class="post_title">
				<img src="/assets/img/file.png" />
				<h1>bioView - 一个生信常用文件格式的可读性增强工具</h1>
				<a href="/"><div class="btn"><span class="fa fa-times"></span></div></a>
				<div class="btn btn_max"><span class="fa fa-window-maximize"></span></div>
				<div class="btn"><span class="fa fa-window-minimize"></span></div>
			</div>
			<ul class="topbar">
				<li>February 21, 2018</li>
			</ul>
			<div class="post_content" style="max-height: 600px">
				<div class="post_content_inner">
        		<p>本文介绍了一个用于常见生物信息文件格式如 .fastq, .fasta, .sam 可读性增强的工具。</p>

<p>首先放出效果图预览：</p>

<p><img src="https://raw.githubusercontent.com/Nanguage/bioView/master/example/imgs/title.png" alt="" width="95%" /></p>

<p>以及：</p>

<ul>
  <li><a href="https://github.com/Nanguage/bioView">github repo</a></li>
  <li><a href="https://github.com/Nanguage/bioView/releases">下载地址</a></li>
</ul>

<!-- more -->

<h2 id="设计初衷">设计初衷</h2>

<p>在很多时候，生物信息分析几乎是一直在围绕着某一些特定格式的文件格式进行的，比如 fasta, fastq, sam, bam 等等。
也许是考虑能使得文件容易被程序解析，或是容易被人所阅读，这些文件格式中的很大一部分都被设计成了文本文件。
另外考虑到这些文件的大小，动辄就是十几甚至几十上百 G ，
所以我们一般不会使用常规的文本编辑器打开，而是使用 Unix 下的 <code>less</code>, <code>head</code>, <code>tail</code> 等工具来对其进行查看。
而这些工具默认情况下并不支持对这些生物信息特定文件格式的色彩高亮、重排版等功能，
造成了我们在对文件进行观察、检查时存在较大的认知障碍，难以快速从中观察出符号串之中潜在的模式、规律。</p>

<p>至少对于我来说，在很多情况下这对我的工作造成了麻烦，比如在有些时候，我想在写代码前确定某一段实验中设计的 index 序列在 fastq records 中的大概位置，以便我对程序进行调整。
但使用 <code>less</code> 进行查看时，面对整屏幕的黑白字符，难以从其中一眼看出 index 序列所处的位置。
又比如说，有时在对 fastq 文件进行预处理时，需要将 reads 末端低质量的序列 trim 掉，但有时候软件默认的参数并不能满足需求，需要进行参数调整，需要对处理前后的 fastq 进行比较，以确定合适的参数。通常会用 <code>fastqc</code> 来生成质量报告来进行检查。这时候如果能够直观地观察 reads 中碱基的质量情况就会很有帮助，而 <code>less</code> 看到的是黑白的 phred 质量字符，很难肉眼分辨质量的高低。</p>

<p>为了解决上述不便，我寻找了一些办法，比如 <a href="https://github.com/bioSyntax/bioSyntax">bioSyntax</a>，它提供了 <code>less</code>, <code>vim</code>, <code>sublime</code>, <code>gedit</code> 中的生物信息专属的语法高亮解决方案，并且支持 .sam, .flagstat, .vcf, .fasta, .fastq 等多种文件格式。</p>

<p>当然，bioSyntax 是一个非常棒的东西。但它也有些地方让我觉得不够方便。首先就最常用的 <code>less</code> 而言（其他的编辑器对大文件支持差，所以我这样认为..），安装上稍微有些不便，需要使用 root 权限通过 apt 来进行安装，而很多时候做生信工作都是在公家的服务器上完成的，并没有 root 权限，（虽然可能也有别的解决办法，但也许还要折腾..）这一点就不是很友好。其次它的配色让我感到不是很令人愉悦，并且它也没有提供出其它简单易行的配色配置方案。还有很重要的一点，bioSyntax 仅仅提供了生信文件的语法高亮，我认为对于可读性的加强来说这是不够的，这只是其中一个方面，为了更清晰地展示，最好还能对文件进行重排版。比如对于 sam 文件，标准的文件格式中每一行有 11 列，信息密度非常高，当然这样设计机器 parse 起来比较方便，但人阅读起来就不舒服了。为了能加强它的可读性，最好能对它进行简单的二次排版。</p>

<p>总结起来，一个我所需要的，理想中的 bioinfo 文件格式可读性增强软件应该具有以下特性：</p>

<ol>
  <li>提供彩色的语法高亮</li>
  <li>支持简单的重排版</li>
  <li>高度可配置，可以切换配色、排版格式等</li>
  <li>易于安装</li>
  <li>运行效率高，使用中无卡顿</li>
  <li>支持 Unix 中的管道操作，与 <code>less</code>, <code>head</code>, <code>tail</code> 无缝衔接。</li>
</ol>

<p>以上也就是我设计，编写 bioView 的初衷。</p>

<h2 id="bioview">bioView</h2>

<h3 id="安装">安装</h3>

<p>提供了编译好的可执行二进制文件供下载，无需安装其他依赖，下载压缩包后解压即可使用。下载地址: <a href="https://github.com/Nanguage/bioView/releases">releases</a></p>

<p><strong>注</strong>：如果系统是旧的 glibc 版本，或者是默认的版本使用时出现提示，可下载 <code>bioview-0.1.1-old_glibc.zip</code></p>

<p>考虑到生信分析大多在 Linux 平台进行，目前只提供了 Linux 平台的版本，当然因为是用 <a href="https://nim-lang.org/">Nim 语言</a>编写的，所以是本身是可以跨平台的，如果需要其它操作系统的版本，可以下载源码进行编译，参考<a href="https://github.com/Nanguage/bioView#compile-the-code">这里</a></p>

<h4 id="shell-辅助函数">shell 辅助函数</h4>

<p>另外可以选择添加辅助的 shell 函数，以便使用。虽然只是对原有命令的简单包装，不影响核心功能，但多少能节省点打字时间。只需要将下列文件加到 配置文件(比如对于 bash shell 的 ~/.bashrc) 的最后并修改第一行的文件路径到 bioview 所在的路径即可。现支持 bash 与 fish：</p>

<ul>
  <li><a href="https://github.com/Nanguage/bioView/blob/master/shell_config/bash_config.bash">bash</a></li>
  <li><a href="https://github.com/Nanguage/bioView/blob/master/shell_config/fish_config.fish">fish</a></li>
</ul>

<h3 id="基本使用">基本使用</h3>

<p>目前尽支持最常用的三种文件格式 .fasta .fasta 和 .sam(.bam),对其它格式的支持还有待开发。
首先通过 -h 来显示使用说明：</p>

<pre><code>$ bioview -h
Command line tool for bioinformatics file format readability enhancement.

Usage:
  bioview fq &lt;file&gt; [--config-file=&lt;config_file&gt;] [--hist=&lt;yes/no&gt;] [--color=&lt;yes/no&gt;] [--phred=&lt;33/64&gt;] [--delimiter=&lt;yes/no&gt;]
  bioview fa &lt;file&gt; [--config-file=&lt;config_file&gt;] [--color=&lt;yes/no&gt;] [--type=&lt;dna/rna/protein&gt;]
  bioview sam &lt;file&gt; [--config-file=&lt;config_file&gt;] [--hist=&lt;yes/no&gt;] [--color=&lt;yes/no&gt;] [--phred=&lt;33/64&gt;] [--multiline=&lt;yes/no&gt;]
  bioview color-atla
  bioview example-config
  bioview (-h | --help)

Options:
  -h --help        Show this help information.
  --phred=&lt;33/64&gt;  Quality score encode for fastq file, 33 or 64. [33]
  --hist=&lt;yes/no&gt;  Show quality hist or not. [yes]
  --delimiter=&lt;yes/no&gt; Show fastq record delimiter or not. [yes]
  --multiline=&lt;yes/no&gt; Show multiple line format of sam file. [no]
  --color=&lt;yes/no&gt; Show color height light of bases or not. [yes]
  --type=&lt;dna/rna/protein&gt;       The record type of fasta file. [dna]
  --config-file=&lt;config_file&gt;    The path to config file. [~/.config/bioview/config.json]
</code></pre>

<p>你可以把 bioview 想象成一个着色器，输入的是原始的文本文件，输出的是经过渲染的结果。现在我们用它来渲染一个 fastq 文件。并将结果传流到 <code>less</code> 中进行查看：</p>

<pre><code>$ bioview fq example.fq | less -rS
</code></pre>

<p>这里 <code>less</code> 需要加 -r 参数用于色彩显示。你会在终端看到：</p>

<p><img src="https://raw.githubusercontent.com/Nanguage/bioView/master/example/imgs/theme_glimpse/simple/simple-fq.png" alt="" /></p>

<p>与普通的用 <code>less</code> 对文件进行查看并无太大区别，只是将碱基带上了颜色，并且在 reads 的第4行，将难以理解的质量字符替换成了柱形图，高低代表质量的好坏，越高即质量越好。同时在不同的 records 之间添加了分割线，以便更加清晰地区分。</p>

<p>同时这些视觉元素，比如颜色、柱形图、分隔符，可以通过参数来选择是否对其进行显示，比如：</p>

<pre><code>$ bioview fq example.fq --color=no | less -rS # 不显示颜色
$ bioview fq example.fq --hist=no | less -rS # 不显示柱形图
$ bioview fq example.fq --delimiter=no # 不显示分隔符
</code></pre>

<p>支持通过管道进行输入，比如先对文件进行解压缩然后通过管道输入 bioview, 只需要将文件名替换为 <code>-</code> 即可:</p>

<pre><code>$ zcat example.fq.gz | bioview fq - | less -rS`
</code></pre>

<p>恩，命令貌似有点长，为了节约打字时间，可以通过 shell 辅助函数简化：</p>

<p>shell 辅助函数包括：</p>

<ul>
  <li>bio-less : 对 bioview + less 的包装</li>
  <li>fq-less : 对 bioview fq + less 的包装</li>
  <li>fa-less : 对 bioview fa + less 的包装</li>
  <li>sam-less : 对 bioview sam + less 的包装</li>
</ul>

<p>比如：</p>

<pre><code>$ bio-less example.fq # 等价于 bioview fq example.fq | less -rS
$ fq-less example.fq # 与上述命令等价
$ zcat example.fq.gz | fq-less - # 等价于 zcat example.fq.gz | bioview fq - | less -rS
</code></pre>

<p>对 fasta 和 sam 的操作也是类似的，这里不再赘述。
值得一提的是 sam 可以通过 <code>--multiline=yes</code> 来排版为多行模式，降低信息密度，方便阅读：</p>

<pre><code>$ bioview sam example.sam --multiline=yes | less -rS
</code></pre>

<p><img src="https://raw.githubusercontent.com/Nanguage/bioView/master/example/imgs/theme_glimpse/verbose/verbose-sam.png" alt="" /></p>

<h3 id="配置文件">配置文件</h3>

<p>上面说了，我想要的是一个可以灵活地对配色、排版等进行配置的软件。所以 bioView 加入了配置文件功能，能够对色彩和视觉元素进行相对于命令行参数更细节配置。</p>

<p>默认的配置文件存放目录位于 <code>~/.config/bioview/config.json</code>，也可以通过 <code>--config-file</code> 指定配置文件。</p>

<h4 id="主题">主题</h4>

<p>每种配置可以视为一种风格主题(theme)。</p>

<p>默认的是 simple theme，我还提供了另外两种 theme:</p>

<ul>
  <li>verbose：冗余风格，相较于 simple 提供更加复杂多彩的样式</li>
  <li>emoji: 通过 emoji 来代替柱状图显示测序质量。（也许没什么用，纯属好玩 :P ，btw. 这个创意来自于<a href="https://github.com/lonsbio/fastqe">这里</a>）</li>
</ul>

<p>我提供了一种一键式的主题切换方案，可以通过一行简单的命令在不同的 theme 之间切换。
比如切换到 verbose:</p>

<pre><code>$ mkdir -p ~/.config/bioview/ ; curl -LJ https://raw.githubusercontent.com/Nanguage/bioView/master/theme/verbose.json n -o ~/.config/bioview/config.json
</code></pre>

<p>其它的主题以及切换代码请参考<a href="https://github.com/Nanguage/bioView/blob/master/theme/README.md">这里</a>。</p>

<h4 id="制作自己的私人配置文件">制作自己的私人配置文件</h4>

<p>由于本人没什么艺术细胞，所以仅仅制作了两种 theme，当然你可以制作你自己的 theme。
可以通过，<code>bioview example-config</code> 来生成一个配置文件的模板。然后对其进行编辑</p>

<pre><code>$ mkdir -p ~/.config/bioview/config.json
$ bioview example-config &gt; ~/.config/bioview/config.json
$ vim ~/.config/bioview/config.json
</code></pre>

<p>配置文件为 json 格式，全局的配置储存在最外层的字段中，比如 <code>base_color</code>, 代表不同碱基的颜色，内层的 <code>base_color::fg</code> 为前景色(foreground)，而 <code>base_color::bg</code> 为背景色(background)，其数值为终端内支持的颜色的编码。可以通过 <code>bioview color-atla</code> 输出色卡进行颜色的编码确认。</p>

<pre><code>$ bioview color-atla
</code></pre>

<p><img src="https://raw.githubusercontent.com/Nanguage/bioView/master/example/imgs/color_atla.png" alt="" /></p>

<p>而对于 fq, fa, sam 特定格式相关的配置位于相应的字段 fq-config, fa-config, sam-config。可以根据需要对其进行相应的配置。</p>

<h2 id="开发">开发</h2>

<p>目前为止，bioView 虽然已经基本达到上面我所说的几个目标，但是仍然是一个不完整的，有待开发的项目。后续还需要提供对其它生信文件格式的支持，以及对现有功能进行测试与调整。欢迎大家提出意见与建议，可以在 github 上直接提 issue，或者邮件联系我。 
邮箱：nanguage@yahoo.com 。
同时如果你喜欢本项目的话，欢迎来点个 star, 也欢迎 fork, pull request 大家一起进行开发。</p>

				
					<br>
<hr>
<br>
<div class="donate">
	<p>Email: nanguage@yahoo.com</p>
</div>
				
				</div>
			</div>
		</div>
    
	<script src="/assets/js/001.js"></script>
	<script src="/assets/js/002.js"></script>
	<div class="footer">
		<p>blog theme: <a href="https://github.com/h01000110/windows-95">win95</a></p>
	</div>
</body>
</html>